<template>
    <div>
        <el-table ref="lotTable" :data="tableData" stripe style="width: 100%; " border >
            <el-table-column type="selection" width="30" />
            <el-table-column property="title" label="商品名称" width="260" />
            <el-table-column property="price" label="售价(元)" width="120" />
            <el-table-column property="collecttime" label="收藏时间" width="200">
                <template #default="scope">
                    {{`${new Date(scope.row.addtimes).getFullYear()}-
                    ${(new Date(scope.row.addtimes).getMonth() + 1).toString().padStart(2, '0')}-
                    ${new Date(scope.row.addtimes).getDate().toString().padStart(2, '0')}
                    ${new Date(scope.row.addtimes).getHours().toString().padStart(2, '0')}:
                    ${new Date(scope.row.addtimes).getMinutes().toString().padStart(2, '0')}:
                    ${new Date(scope.row.addtimes).getSeconds().toString().padStart(2, '0')}
                    `
                    }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <div class="addcar" @click="addToCar(scope.row)">加入购物车</div>
                    <div @click="delFn" class="del">删除</div>
                </template>

            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection(tableData)">全选</el-button>
            <el-button @click="toggleSelection()">不选</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus'
import { defineComponent } from 'vue'
import { delcommodity, getCollectCommodity } from "@/utils/api";
interface User {
    id: number
    title: string
    price: number
    // collecttime: string
}
export default defineComponent({
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    cover: '',
                    title: '',
                    addtimes: '',
                    price: 40,
                    physiognomy: '',
                    selected: 1,
                    acount: 1
                },
            ],
        }
    },
    methods: {
        toggleSelection(rows?: User[]) {
            if (rows) {
                rows.forEach(row => {
                    // console.log('row...', row);
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    this.$refs.lotTable.toggleAllSelection(row, undefined)
                })
            } else {
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-expect-error
                this.$refs.lotTable.clearSelection()
            }
        },
        delFn(event: any) {
            if (!confirm('是否确定删除？')) return;
            this.tableData.forEach(item => {
                delcommodity(item.id).then((res: any) => {
                    console.log(res);
                    // event.target.parentElement.parentElement.parentElement.remove()
                }).catch(err => {
                    console.log(err);

                })


            })

        },
        addToCar(rows: { id: any; }) {
            // console.log('data...', rows);
            ElMessage({
                message: '已成功加入购物车',
                type: 'success',
            })
            // 将数据传到购物车页面
            this.$router.push({
                path: '/car',
                query: { id: rows.id }
            })
        },
    },
    created() {
        getCollectCommodity().then((res: any) => {
            console.log(res.data.data);
            this.tableData = res.data.data
        }).catch(err => {
            console.log(err);

        })
    }
})

</script>
<style lang="scss" scoped >
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.addcar {
    cursor: pointer;

}

.del {
    cursor: pointer;
}

.cell {

    font-size: 12px;
    padding: 0 5px;
    margin-bottom: 10px;
}

.el-button {
    height: 20px;
    font-size: 12px;
}
</style>